<template>
  <div class="head">
    <div class="title">
      <img
        src="../../assets/logo.png"
        style="padding-right:1rem;height: 24px;"
      />{{ title }}
    </div>
    <div class="time">
      <span>{{ time }}</span>
    </div>
    <div class="head-right">
      <span> {{ cjname }}</span>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { bnrQuery } from '../../api/dataApi'

export default {
  name: 'ToHead',
  components: {},
  props: {
    title: {
      type: String,
      default: '舒普思达可视化看板',
    },
  },
  // computed: {
  // wcname() {
  //   let cName = ''
  //   this.wcList.some((wcItem) => {
  //     if (wcItem.wcid === this.selectWcid) {
  //       cName = wcItem.description
  //       return true
  //     }
  //     return false
  //   })
  //   return cName
  // },
  // timeRange() {
  //   let _timeRange = ''
  //   _timeRange += this.startTime
  //   _timeRange += this.startTime && this.endTime ? '        ~        ' : ''
  //   _timeRange += this.endTime
  //   return _timeRange
  // },
  // },
  data() {
    return {
      time: '',
      timer: null,
      cx: '',
      cjname: '',
      // selectWcid: this.wcid,
    }
  },
  mounted() {
    this.time = moment().format('YYYY-MM-DD')
    // 定时刷新时间
    this.timer = setInterval(() => {
      this.time = moment().format('YYYY-MM-DD')
    }, 1000)
    this.getData(this.$route.query.cj)
    console.log('this.$route.query.cj', this.$route.query.cj)
  },
  destroyed() {
    if (this.timer) {
      // 注意在vue实例销毁前，清除我们的定时器
      clearInterval(this.timer)
    }
  },
  methods: {
    getData(cj) {
      const that = this
      const header = {}
      header['report.tableid'] = 'main@prod_cj'
      header['cj'] = cj
      const params = {
        '@params': JSON.stringify(header),
        _condition: {},
        pageSize: 99999,
        pageIndex: 0,
        sortField: 'id',
        sortOrder: 'desc',
      }
      bnrQuery(params)
        .then((res) => {
          if (res.data && res.data.length > 0) {
            this.cjname = res.data[0].cjname
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
  },
  created() {},
}
// import moment from 'moment'
</script>
<style lang="less" scoped>
.head {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
  height: 8vh;
  background: url(../../assets/header_bj.png) no-repeat;
  background-size: 100% 100%;
}
.left {
  flex: 20%;
  font-size: 1.7rem;
}
.title {
  flex: 60%;
  .px2font(24);
  color: #fff;
  padding-top: 12px;
  background-image: -webkit-linear-gradient(bottom, #1e91fc, #1efcf9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.time {
  position: absolute;
  left: 0;
  width: 30vw;
  .px2vh(top, 40);
  .px2font(18);

  color: #ddd;
}
.head-right {
  position: absolute;
  right: 0;
  width: 30vw;
  .px2vh(top, 40);
  .px2font(18);
  color: #fff;
}
.logoy {
  /* width: 2.4rem;
  height: 1rem;
  opacity: 0.8; */

  position: absolute;
  right: 2vw;
  opacity: 0.7;
  top: 89.5vh;
  z-index: 99999;
}
.logoy img {
  height: 2rem;
  z-index: 99999;
}
</style>
